<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
      <!-- 视频 -->
      <div class="popCon popCon1">
        <div class="videoPop">
            <video videoSource="./public/1.mp4" id="myVideo1" poster="./public/1.JPG" controls></video>
        </div>
    </div>
    <div class="popCon popCon2">
        <div class="videoPop">
            <video videoSource="./public/1.mp4" id="myVideo2" poster="./public/1.JPG" controls></video>
        </div>
    </div>
    <div class="popCon popCon3">
        <div class="videoPop">
            <video videoSource="./public/1.mp4" id="myVideo3" poster="./public/1.JPG" controls></video>
        </div>
    </div>
    <div class="popCon popCon4">
        <div class="videoPop">
            <video videoSource="./public/1.mp4" id="myVideo4" poster="./public/1.JPG" controls></video>
        </div>
    </div>

    <div id="realplayer"
        style="position:absolute;width:1px;height:1px;z-index:-1;transform:translateZ(-1px);left:-10000px">
        <video id="realVideo" class="full_player" poster="./public/1.JPG" webkit-playsinline="true"
            playsinline="true" x5-video-player-type="h5" x5-video-orientation="landscape" controls></video>
    </div>
    <div id="fullplayer"
        style="position:absolute;width:100%;height:100vh;z-index:999;transform:translateZ(999px);left:0px;top:0px;display:none;">
        <video id="fullVideo" class="full_player" poster="./public/1.JPG" webkit-playsinline="true"
            playsinline="true" x5-video-player-type="h5" x5-video-orientation="landscape" controls></video>
    </div>


  <script src="https://pss.bdstatic.com/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
  <script>
    /*
 * singleplayer.js
 * 为了优化性能，对于页面中多于一个video标签，但同时只有一个VIDEO点播的，SinglePlayer仅使用一个VIDEO标签
 * 第一个SinglePlayer保留VIDEO标签，并将VIDEO设置为1x1（苹果浏览器可能要求VIDEO不能隐藏，否则直接冻结优化掉视频流）
 * if (null == g_SinglePlayer) { // 仅保留第一个VIDEO标签，并将尺寸设置为1x1
    $(this.video).css("width", "1px").css("height", "1px");
    $(this.video).parent().append(html);
    g_SinglePlayer = this;
 }
 else { // 用SinglePlayer替换VIDEO标签
    $(this.video).parent().html(html);
    this.videoId = g_SinglePlayer.playerId;
    this.video = g_SinglePlayer.video;
    if (!this.isFullPlayer) {
        g_VidepPlayerList.push(this);
    }
 }
 * 对于部分浏览器，设置video.src则会自动缓存视频，即使通过DOM操作删除video，也不会导致已经缓存下载的视频流取消缓存和下载
 * SinglePlayer通过自定义videoSource属性替代src属性，在激活对应player时再用videoSource值设置src
 * */
    var g_VidepPlayerList = new Array();
    var g_FullscreenPlayer = null;
    var g_CurrentPlayer = null;
    var g_SinglePlayer = null;
    var g_ActivedPlayer = null;
    var g_PlayerClicked = false;
    class SinglePlayer {
      constructor(videoId, videoWidth = 960, videoHeight = 540, full = false) {
        this.videoId = videoId;
        this.videoWidth = videoWidth;
        this.videoHeight = videoHeight;
        this.isVisibled = true;
        this.isFullPlayer = full;
        this.playerId = videoId + "_player";
        this.canvasId = videoId + "_canvas";
        this.controlsId = videoId + "_controls";
        this.timeId = videoId + "_time";
        this.playId = videoId + "_play";
        this.muteId = videoId + "_mute";
        this.seekId = videoId + "_seek";
        this.fullscreenId = videoId + "_fullscreen";
        this.isSeeking = false;
        this.isFirstPlayed = false;

        this.video = document.getElementById(videoId);
        if (null == this.video) {
          console.log("没有找到视频[" + videoId + "]");
        }
        this.poster = new Image();
        this.poster.src = $(this.video).attr("poster");
        this.videoSource = $(this.video).attr("videoSource");
        this.canvas = null;
        this.player = null;
        this.isFullscreen = false;
        this.isPlaying = false;
        this.idletime = 0;
        this.lasttimestamp = 0;
        this.frames = 0;
        this.frametime = 0;
        this.fps = 0;

        this.touchX = null;
        this.touchY = null;
        this.seekStart = 0;
        this.message = "";

        var html = "";
        if (!full) {
          html += '<div id="' + this.playerId + '" class="canvas_player" style="position:absolute;width:100%;">';
          html += '  <canvas class="canvasplayer_canvas" id="' + this.canvasId + '" width="' + this.videoWidth + '" height="' + this.videoHeight + '" style="width:100%;"></canvas>';
          html += '  <div class="canvasplayer_controls" id="' + this.controlsId + '" style="position:absolute;width:100%;height:20%;bottom:1.6%;left:0px;background-image:url(\'img/videoplayer/backgnd.png\');transform: translateZ(10px);z-order:10">';
          html += '    <div class="canvasplayer_controls" style="position:absolute;width:85%;height:30%;left:10%;top:40%"><input type="range" min="0.0" max="1.0" value="0.0" step="0.01" id="' + this.seekId + '" style="width:100%;height:15%;::-webkit-slider-thumb{width:10px;height:10px;}" /></div>';
          html += '    <div class="canvasplayer_controls" id="' + this.timeId + '" style="position:absolute;width:60%;left:10%;top:15%;text-align:left;"><span style="color:white;text-align:left;font-size:50%">0:00 / 0:00</span></div>';
          html += '    <div class="canvasplayer_controls" id="' + this.playId + '" style="position:absolute;width:3%;left:5%;top:39%;padding-top:4px;"><img src="./public/1.JPG" /></div>';
          html += '    <div class="canvasplayer_controls" id="' + this.muteId + '" style="position:absolute;width:3%;left:80%;top:15%"><img src="./public/1.JPG" /></div>';
          html += '    <div class="canvasplayer_controls" id="' + this.fullscreenId + '" style="position:absolute;width:3%;left:90%;top:15%"><img src="./public/1.JPG" /></div>';
          html += '  </div>';
          html += '</div>';
        }
        else {
          html += '<div id="' + this.playerId + '" class="canvas_player" style="position:absolute;width:100%;left:0px;top:0px;">';
          html += '  <canvas class="canvasplayer_canvas" id="' + this.canvasId + '" width="' + this.videoWidth + '" height="' + this.videoHeight + '" style="width:100%;height:' + window.innerWidth + 'px"></canvas>';
          html += '  <div class="canvasplayer_controls" id="' + this.controlsId + '" style="position:absolute;width:100%;height:20%;bottom:0px;left:0px;background-image:url(\'img/videoplayer/backgnd.png\');transform: translateZ(10px);z-order:10">';
          html += '    <div class="canvasplayer_controls" style="position:absolute;width:85%;height:30%;left:10%;bottom:20%"><input type="range" min="0.0" max="1.0" value="0.0" step="0.01" id="' + this.seekId + '" style="width:100%;height:15%" /></div>';
          html += '    <div class="canvasplayer_controls" id="' + this.timeId + '" style="position:absolute;width:60%;left:10%;top:15%;text-align:left;"><span style="color:white;text-align:left;font-size:50%">0:00 / 0:00</span></div>';
          html += '    <div class="canvasplayer_controls" id="' + this.playId + '" style="position:absolute;width:3%;left:5%;top:50%"><img src="./public/1.JPG" /></div>';
          html += '    <div class="canvasplayer_controls" id="' + this.muteId + '" style="position:absolute;width:3%;left:80%;top:15%"><img src="./public/1.JPG" /></div>';
          html += '    <div class="canvasplayer_controls" id="' + this.fullscreenId + '" style="position:absolute;width:3%;left:90%;top:15%"><img src="i./public/1.JPG" /></div>';
          html += '  </div>';
          html += '</div>';
          g_FullscreenPlayer = this;
        }
        if (null == g_SinglePlayer) {
          $(this.video).css("width", "1px").css("height", "1px");
          $(this.video).parent().append(html);
          g_SinglePlayer = this;
        }
        else {
          $(this.video).parent().html(html);
          this.videoId = g_SinglePlayer.playerId;
          this.video = g_SinglePlayer.video;
          if (!this.isFullPlayer) {
            g_VidepPlayerList.push(this);
          }
        }

        $("#" + this.canvasId).click(function () {
          if (!SinglePlayer.TestPlayerClicked()) return;
          var id = $(this).attr("id");
          var player = SinglePlayer.getPlayerByCanvasId(id);
          if (!player.isFullPlayer && SinglePlayer.GetActivePlayer() != player) {
            SinglePlayer.ActivePlayer(player);
          }
          player.showcontrols();
          if (!player.isFirstPlayed) {
            player.play();
          }
        });
        $("#" + this.playId).click(function () {
          if (!SinglePlayer.TestPlayerClicked()) return;
          var playerId = $(this).closest('.canvas_player').attr("id");
          var player = SinglePlayer.getPlayerByPlayerId(playerId);
          if (!player.isFullPlayer && SinglePlayer.GetActivePlayer() != player) {
            SinglePlayer.ActivePlayer(player);
          }
          if (player.isPlaying) {
            player.pause();
          }
          else {
            player.play();
          }
        });
        $("#" + this.muteId).click(function () {
          if (!SinglePlayer.TestPlayerClicked()) return;
          var playerId = $(this).closest('.canvas_player').attr("id");
          var player = SinglePlayer.getPlayerByPlayerId(playerId);
          player.mute(!player.isMuted());
          player.updateUI();
        });
        $("#" + this.seekId).change(function () {
          if (!SinglePlayer.TestPlayerClicked()) return;
          var playerId = $(this).closest('.canvas_player').attr("id");
          var player = SinglePlayer.getPlayerByPlayerId(playerId);
          player.seek($(this).val());
        });
        var seek = document.getElementById(this.seekId);
        seek.addEventListener('touchstart', function (event) {
          if (!SinglePlayer.TestPlayerClicked()) return;
          //event.preventDefault();
          var playerId = $(seek).closest('.canvas_player').attr("id");
          var player = SinglePlayer.getPlayerByPlayerId(playerId);
          player.isSeeking = true;
          player.showcontrols();
          if (event.targetTouches.length == 1) {
            var touch = event.targetTouches[0];
            player.touchX = touch.clientX;
            player.touchY = touch.clientY;
            player.seekStart = new Number($(seek).val());
          }
        });
        seek.addEventListener('touchmove', function (event) {
          if (!SinglePlayer.TestPlayerClicked()) return;
          //event.preventDefault();
          var playerId = $(seek).closest('.canvas_player').attr("id");
          var player = SinglePlayer.getPlayerByPlayerId(playerId);
          player.showcontrols();
          player.isSeeking = true;
          if (event.targetTouches.length == 1) {
            var touch = event.targetTouches[0];
            var dx = touch.clientX - player.touchX;
            var dy = touch.clientY - player.touchY;
            dy /= $(seek).outerWidth(false);
            player.message = "setPos(" + player.seekStart + dy + ")";
            $(seek).val(player.seekStart + dy)
            player.seek(player.seekStart + dy);
          }
        });
        seek.addEventListener('touchend', function (event) {
          if (!SinglePlayer.TestPlayerClicked()) return;
          //event.preventDefault();
          // alert("touchend at " + $(seek).closest('.canvas_player').attr("id") + " with " + event.targetTouches.length);
          if (event.targetTouches.length == 0) {
            var playerId = $(seek).closest('.canvas_player').attr("id");
            var player = SinglePlayer.getPlayerByPlayerId(playerId);
            setTimeout(function () {
              player.isSeeking = false;
            }, 100, this)
          }
        });
        $("#" + this.seekId).mousedown(function () {
          if (!SinglePlayer.TestPlayerClicked()) return;
          var playerId = $(this).closest('.canvas_player').attr("id");
          var player = SinglePlayer.getPlayerByPlayerId(playerId);
          player.isSeeking = true;
        });
        $("#" + this.seekId).mouseout(function () {
          if (!SinglePlayer.TestPlayerClicked()) return;
          var playerId = $(this).closest('.canvas_player').attr("id");
          var player = SinglePlayer.getPlayerByPlayerId(playerId);
          player.isSeeking = false;
        });
        $("#" + this.fullscreenId).click(function () {
          if (!SinglePlayer.TestPlayerClicked()) return;
          var playerId = $(this).closest('.canvas_player').attr("id");
          var player = SinglePlayer.getPlayerByPlayerId(playerId);
          console.log("全屏按钮[" + this.isFullPlayer + "]");
          if (!player.isFullPlayer) {
            player.fullscreen();
          }
          else {
            SinglePlayer.ExitFullscreen();
          }
        });

        this.canvas = document.getElementById(this.canvasId);
        this.player = document.getElementById(this.playerId);
      }
      static getPlayerByPlayerId (playerId) {
        if (null != g_FullscreenPlayer && g_FullscreenPlayer.playerId == playerId) {
          return g_FullscreenPlayer;
        }
        for (var i = 0; i < g_VidepPlayerList.length; ++i) {
          if (g_VidepPlayerList[i].playerId == playerId) {
            return g_VidepPlayerList[i];
          }
        }
        return null;
      }
      static getPlayerByVideoId (videoId) {
        if (null != g_FullscreenPlayer && g_FullscreenPlayer.videoId == videoId) {
          return g_FullscreenPlayer;
        }
        for (var i = 0; i < g_VidepPlayerList.length; ++i) {
          if (g_VidepPlayerList[i].videoId == videoId) {
            return g_VidepPlayerList[i];
          }
        }
        return null;
      }
      static getPlayerByCanvasId (canvasId) {
        if (null != g_FullscreenPlayer && g_FullscreenPlayer.canvasId == canvasId) {
          return g_FullscreenPlayer;
        }
        for (var i = 0; i < g_VidepPlayerList.length; ++i) {
          if (g_VidepPlayerList[i].canvasId == canvasId) {
            return g_VidepPlayerList[i];
          }
        }
        return null;
      }
      static toTime (seconds) {
        if (isNaN(seconds)) {
          return "0:00";
        }
        else {
          var minutes = parseInt(seconds / 60);
          seconds = parseInt(seconds - minutes * 60);
          if (seconds < 10) {
            return minutes + ":0" + seconds;
          }
          else {
            return minutes + ":" + seconds;
          }
        }
      }
      static isNullOrEmpty (str) {
        return null == str || undefined == str || "" == str || "undefined" == str;
      }
      updateUI () {
        if (this.isMuted()) {
          $("#" + this.muteId).find("img").attr("src", "./public/1.JPG");
        }
        else {
          $("#" + this.muteId).find("img").attr("src", "./public/1.JPG");
        }
        if (!this.isPlaying) {
          $("#" + this.playId).find("img").attr("src", "./public/1.JPG");
        }
        else {
          $("#" + this.playId).find("img").attr("src", "./public/1.JPG");
        }
        if (null == g_FullscreenPlayer) {
          $("#" + this.fullscreenId).hide();
        }
        else {
          $("#" + this.fullscreenId).show();
        }
      }
      play () {
        if (this.isFirstPlayed) {

        }
        this.video.play();
        this.isPlaying = true;
        this.isFirstPlayed = true;
      }
      pause () {
        this.video.pause();
        this.isPlaying = false;
      }
      showcontrols () {
        this.idletime = 0;
        $("#" + this.controlsId).show();
      }
      mute (muted) {
        this.video.muted = muted;
      }
      isMuted () {
        return this.video.muted;
      }
      seek (pos) {
        if (!isNaN(this.video.currentTime) && !isNaN(this.video.duration)) {
          this.video.currentTime = pos * this.video.duration;
        }
      }
      fullscreen () {
        if (null != g_FullscreenPlayer) {
          this.isFullscreen = true;
          g_CurrentPlayer = this;
          g_FullscreenPlayer.setVisible(true);
          g_FullscreenPlayer.isPlaying = this.isPlaying;
          g_FullscreenPlayer.isMuted = this.isMuted;
          g_FullscreenPlayer.isFirstPlayed = this.isFirstPlayed;
        }
      }
      static ExitFullscreen () {
        console.log("ExitFullscreen");
        if (null != g_FullscreenPlayer && null != g_CurrentPlayer) {
          g_CurrentPlayer.isPlaying = g_FullscreenPlayer.isPlaying;
          g_CurrentPlayer.isMuted = g_FullscreenPlayer.isMuted;
          g_CurrentPlayer.isFirstPlayed = g_FullscreenPlayer.isFirstPlayed;;
          g_CurrentPlayer.isFullscreen = false;

          g_FullscreenPlayer.setVisible(false);

          g_CurrentPlayer = null;
        }
      }
      setVisible (visible = true) {
        this.isVisibled = visible;
        if (visible) {
          $(this.player).parent().show();
          this.showcontrols();
        }
        else {
          $(this.player).parent().hide();
        }
      }
      nextFrame () {

      }
      render (timestamp) {
        var ticks = (timestamp - this.lasttimestamp) / 1000;
        this.lasttimestamp = timestamp;
        this.frametime += ticks;
        if (this.frametime >= 0.1) {
          this.nextFrame();
          this.frametime = 0;
        }
        ++this.frames;
        this.fps = this.frames * 1000 / this.timestamp;
        this.idletime += ticks;

        // 绘制视频
        let canvas = this.canvas;
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        var vh = this.video.videoWidth;
        var vw = this.video.videoHeight;
        var aspect = vw / vh;
        var height = canvas.width * aspect;
        var width = canvas.width;
        var top = (canvas.height - height) / 2;
        var left = 0;
        if (top < 0) {
          width = canvas.height / aspect;
          height = canvas.height;
          top = 0;
          left = (canvas.width - width) / 2
        }
        ctx.drawImage(this.video, left, top, width, height);

        if (!this.isFirstPlayed) {
          if (null != this.poster) {
            var vh = this.poster.width;
            var vw = this.poster.height;
            var aspect = vw / vh;
            var height = canvas.width * aspect;
            var width = canvas.width;
            var top = (canvas.height - height) / 2;
            var left = 0;
            if (top < 0) {
              width = canvas.height / aspect;
              height = canvas.height;
              top = 0;
              left = (canvas.width - width) / 2
            }
            ctx.drawImage(this.poster, left, top, width, height);
          }
        }
        var text = timestamp + " - " + this.message;
        ctx.font = "30px Verdana";
        ctx.fillStyle = "red";
        // ctx.fillText(text, canvas.width * 0.05, canvas.height * 0.05);

        var text = SinglePlayer.toTime(this.video.currentTime) + "&nbsp;\/&nbsp;" + SinglePlayer.toTime(this.video.duration);
        $("#" + this.timeId).find("span").html(text);
        if (!this.isSeeking) {
          var seek = 0;
          if (!isNaN(this.video.currentTime) && !isNaN(this.video.duration)) {
            seek = this.video.currentTime / this.video.duration
          }
          $("#" + this.seekId).val(seek);
        }
        if (this.idletime > 3) {
          $("#" + this.controlsId).hide();
        }
      }
      static RenderPlayers (timestamp) {
        if (null != g_FullscreenPlayer && g_FullscreenPlayer.isVisibled) {
          g_FullscreenPlayer.render(timestamp);
        }
        else {
          for (var i = 0; i < g_VidepPlayerList.length; ++i) {
            var player = g_VidepPlayerList[i];
            if (player.isVisibled) {
              player.render(timestamp);
            }
          }
        }
        window.requestAnimationFrame((timestamp) => SinglePlayer.RenderPlayers(timestamp));
      }
      static Init () {
        if (null != g_FullscreenPlayer) {
          g_FullscreenPlayer.setVisible(false);
        }
        window.requestAnimationFrame((timestamp) => SinglePlayer.RenderPlayers(timestamp));
      }
      static ActivePlayer (player) {
        if (player == g_FullscreenPlayer) {
          console.log("不能将全屏播放器设置为激活");
          return;
        }
        for (var i = 0; i < g_VidepPlayerList.length; ++i) {
          if (g_VidepPlayerList[i] != player) {
            g_VidepPlayerList[i].setVisible(false)
          }
        }
        if (null != g_ActivedPlayer) {
          g_ActivedPlayer.pause();
        }
        g_ActivedPlayer = player;
        if (null != g_ActivedPlayer) {
          g_ActivedPlayer.setVisible(true);
          g_SinglePlayer.video.pause();
          $(g_SinglePlayer.video).attr("src", g_ActivedPlayer.videoSource);
          g_ActivedPlayer.isFirstPlayed = false;
          g_ActivedPlayer.isPlaying = false;
          g_ActivedPlayer.updateUI();
        }
      }
      static GetActivePlayer () {
        return g_ActivedPlayer;
      }
      static IsPlayerClicked () {
        return g_PlayerClicked;
      }
      static TestPlayerClicked () {
        console.log("g_PlayerClicked=" + g_PlayerClicked);
        if (g_PlayerClicked) {
          return false;
        }
        g_PlayerClicked = true;
        setTimeout(function () {
          g_PlayerClicked = false;
        }, 100, null);
        return true;;
      }
    }

  </script>
  <script>
    	// 先创建真实播放器和全屏播放器
  new SinglePlayer("realVideo", window.innerHeight, window.innerWidth, false);
  new SinglePlayer("fullVideo", window.innerHeight, window.innerWidth, true);

	// 创建每个VIDEO对应播放器（不会生成CANVAS）
  var index = 0;
  $("video").each(function (index, element) {
      if (!$(element).hasClass("full_player")) {
          $(element).attr("id", "myVideo_" + index);
          new SinglePlayer("myVideo_" + index, 960, 540, false);
          index++;
      }
  });

	// 切换slider时激活对应视频
  function SlideVideo(pop) {
      var domPlayer = $("." + pop).find(".canvas_player");
      var playerId = $(domPlayer).attr("id");
      var player = SinglePlayer.getPlayerByPlayerId(playerId);
      if (null != player) {
          SinglePlayer.ActivePlayer(player);
          console.log("切换视频成功[" + playerId + "]")
      }
      else {
          console.log("切换视频失败[" + playerId + "]")
      }
  }

  </script>
</body>

</html>